<div class="docs-container">
  <nav class="navbar navbar-light bg-white navbar-expand-lg border-bottom">
    <a class="navbar-brand" href="/">
        <img width="135" alt="Imgbot" src="/images/imgbot.svg" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto align-items-center">
            <li class="nav-item">
                <a class="nav-link mb-0" href="/docs">Documentation</a>
            </li>
            <li class="nav-item">
                <a class="nav-link mb-0" href="/app">Log in</a>
            </li>
            <li class="nav-item ml-3">
                <a class="btn btn-primary" href="https://github.com/marketplace/imgbot">Try for free</a>
            </li>
        </ul>
    </div>
  </nav>
  <nav class="docs-sidebar fixed-top">
    <ul>
      <% _.forEach(docs, function(doc) { %>
        <li><a href="#<%- doc.slug %>"><%- doc.title %></a></li>
      <% }) %>
    </ul>
  </nav>
  <div class="docs-content">
    <% _.forEach(docs, function(doc, index) { %>
      <div class="article">
        <% if (index === 0) { %>
          <h1><a href="#<%- doc.slug %>" id="<%- doc.slug %>"><%- doc.title %></a></h1>
        <% } else { %>
          <h2><a href="#<%- doc.slug %>" id="<%- doc.slug %>"><%- doc.title %></a></h2>
        <% } %>
        <%= doc.html %>
      </div>
    <% }) %>
  </div>
</div>
